<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
  <app></app>
</div>
</body>
<script>
  new Vue({
    el: "#root",
    components:{
      App:{
        data(){
          return {
            username:"zhangsan",
            age:12
          }
        },
        template:(`
				    <div>
				        <h3>App</h3>
				        <child :username="username" :age="age" sex="男"></child>
                    </div>
				`),
        components:{
          Child:{
            // 数组
            // props:["username","age"],

            // 对象
            // props:{
            // 	// 接收的属性名字为username,类型必须是一个字符串
            //     username:String,
            //     // 接收的属性名字为username,类型必须是一个数字
            //     // username:Number
            //     age:Number
            // },

            // props的值是一个对象，对象属性名即是接收的参数的名字，属性的值可以设置为对象
            props:{
              username:{
                // 类型
                type:String
              },
              age:{
                type:Number
              },
              sex:{
                type:String,
                required:true,// 不允许省略该属性
              },
              hobby:{
                type:String,
                default:"学习",// 默认属性
              },
              arr:{
                // 如果类型是对象或数组，那么默认值必须通过工厂函数进行返回
                type:Array,
                default(){
                  return [1,2,3,4]
                }
              }
            },
            template:(`
						    <div>
						        <h3>Child</h3>
						        <p>username:{{username}}</p>
						        <p>age:{{age}}</p>
						        <p>hobby:{{hobby}}</p>
						        <p>arr:{{arr}}</p>
                            </div>
						`)
          }
        }
      }
    }
  })
</script>
</html>